<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>02-ref和reactive响应式引用的用法和原理</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue@next"></script>
    <div id="root"></div>

    <script>
      //ref reactive 响应式的引用

      //  原理 通过proxy对数据进行封装 当数据变化时  触发模板等内容的更新
      //   ref  处理基础类型数据

      //  reactive 处理非基础类型数据

      const app = Vue.createApp({
        template: `
                    <div>{{name}}{{age}}</div>
                `,

        // created 实例被完全初始化之前
        setup(props, context) {
          //  const { ref } = Vue;

          //  // proxy  "云牧" 变成 Proxy({value:"云牧"})这样的响应引用
          //  let name = ref("云牧");
          //  setTimeout(() => {
          //    name.value = "夕颜";
          //  }, 2000);

          //  proxy  {name:"云朵"}  变成 proxy({name:"云朵"})这样的响应引用

          const { reactive, toRefs } = Vue;
          let nameObj = reactive({ name: "黛玉", age: 18 });
          setTimeout(() => {
            nameObj.name = "云牧";
            nameObj.age = 28;
          }, 2000);

          //  toRefs
          //proxy({ name: "黛玉", age:18 })
          //name:proxy(value:"黛玉")
          //age:proxy(value:"18")
          const { name, age } = toRefs(nameObj);

          return { name, age };

          //  const { reactive, readonly } = Vue;

          //  let arr = reactive([123]);

          //  let newArr = readonly(arr);

          //  setTimeout(() => {
          //    arr[0] = 456;

          //    newArr[0] = 456;
          //  }, 2000);
          //  return { arr, newArr };
        },
      });

      const vm = app.mount("#root");
    </script>
  </body>
</html>
